import './style/index.less';
import { Row, Col, Tooltip } from 'antd';
import { observer } from 'mobx-react';
import { WeaEchart, WeaNewScroll } from 'ecCom'

@observer
export default class GovernAnalysis extends React.Component {

    constructor(props) {
        super(props);
        this.isMounted = false;
        this.state = {
            winWidth: document.body.offsetWidth,
            winHeight: document.body.offsetHeight,
        };
    }

    componentDidMount = () => {
        const { governAnalysisStore, id } = this.props;
        governAnalysisStore.getTaskStatistics({"taskid":id});
        this.isMounted = true;
        this.scrollPage();
        jQuery(window).resize(() => {
            this.isMounted && this.scrollPage();
        });
    }

    scrollPage = () => {
        this.setState({ winHeight: document.body.offsetHeight, winWidth: document.body.offsetWidth });
    }

    getTooltip = () => {
        const { governAnalysisStore } = this.props;
        const { statistics} = governAnalysisStore;
        let barConfig = statistics;
        
        // [{ id: 1, topic: "子任务", content: "13", block: true, unit: "个" },
        // { id: 2, topic: "已完成", content: "0", unit: "个" },
        // { id: 1, topic: "未开始", content: "0", unit: "个" },
        // { id: 1, topic: "进行中", content: "0", unit: "个" },
        // { id: 1, topic: "已超期", content: "13", unit: "个" },
        // { id: 1, topic: "已废弃", content: "0", unit: "个" },
        // { id: 1, topic: "完成进度", content: "30%", block: true, unit: "" },
        // { id: 1, topic: "距离结束日期", content: "10", unit: "天" }];

        let group = [];
        (barConfig).map(c => {
            group.push(<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@fmr27t@${c.topic}`} placement="bottom">
                <div className={c.block ? "ThemeColor3" : ""}>
                    <span class="charBarNum1">{c.content}</span>{c.unit}
                    <span class="block">{c.topic}</span>
                </div>
            </Tooltip>)
        })
        return group;
    }

    render() {
        
        let categories = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
        let series = [0.5, 2, 0.43, 3.4, 4, 0];

        let option = {
            title: {
                text: 'Step Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Step Start', 'Step Middle', 'Step End']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Step Start',
                    type: 'line',
                    step: 'start',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Step Middle',
                    type: 'line',
                    step: 'middle',
                    data: [220, 282, 201, 234, 290, 430, 410]
                },
                {
                    name: 'Step End',
                    type: 'line',
                    step: 'end',
                    data: [450, 432, 401, 454, 590, 530, 510]
                }
            ]
        };

        let option1 = {
            angleAxis: {
            },
            radiusAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四'],
                z: 10
            },
            polar: {
            },
            series: [{
                type: 'bar',
                data: [1, 2, 3, 4],
                coordinateSystem: 'polar',
                name: 'A',
                stack: 'a'
            }, {
                type: 'bar',
                data: [2, 4, 6, 8],
                coordinateSystem: 'polar',
                name: 'B',
                stack: 'a'
            }, {
                type: 'bar',
                data: [1, 2, 3, 4],
                coordinateSystem: 'polar',
                name: 'C',
                stack: 'a'
            }],
            legend: {
                show: true,
                data: ['A', 'B', 'C']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
        };



        var category = [];
        var dottedBase = +new Date();
        var lineData = [];
        var barData = [];

        for (var i = 0; i < 20; i++) {
            var date = new Date(dottedBase += 3600 * 24 * 1000);
            category.push([
                date.getFullYear(),
                date.getMonth() + 1,
                date.getDate()
            ].join('-'));
            var b = Math.random() * 200;
            var d = Math.random() * 200;
            barData.push(b)
            lineData.push(d + b);
        }


        // option
        let option2 = {
            backgroundColor: '#0f375f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['line', 'bar'],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: {
                data: category,
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            yAxis: {
                splitLine: { show: false },
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            series: [{
                name: 'line',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 15,
                data: lineData
            }, {
                name: 'bar',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {}
                },
                data: barData
            }, {
                name: 'line',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    normal: {
                    }
                },
                z: -12,
                data: lineData
            }, {
                name: 'dotted',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    normal: {
                        color: '#0f375f'
                    }
                },
                symbolRepeat: true,
                symbolSize: [12, 4],
                symbolMargin: 1,
                z: -10,
                data: lineData
            }]
        };

        let { winWidth, winHeight } = this.state;
        let maxWidth = (winWidth - (30 + 20 + 16) * 2) * 0.96;
        let eachWidth = (maxWidth - 30) / 2;
        return (
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@3fhf4x`} height={'100%'}>
                <div className="governAnalysis">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fx7gfa`} className="governChartBar" style={{ padding: "16px", paddingBottom: 88 }}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bfidhw`} xs={22} className="governChartBarLeft" style={{ width: maxWidth }}>
                            {this.getTooltip()}
                        </Col>
                    </Row>

                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@b272cb`} style={{ padding: "16px" }}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0ibdyv`} xs={11} className="chartBar" style={{ height: 300, marginLeft: 30 }}>
                            <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@3si5na`} ref="chart2" chartName="" categories={categories} series={series} />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@z5wwuf`} xs={11} className="chartBar" style={{ height: 300, marginLeft: 30 }}>
                            <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@3lnoyy`} ref="chart" option={option} useDefault={false} />
                        </Col>
                    </Row>

                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0bm1ed`} style={{ padding: "16px" }}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6pxdkn`} xs={11} className="chartBar" style={{ height: 300, marginLeft: 30 }}>
                            <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@0cb1y2`} ref="chart4" option={option1} useDefault={false} />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@sbtbor`} xs={11} className="chartBar" style={{ height: 300, marginLeft: 30 }}>
                            <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@mb3xxs`} ref="chart4" option={option2} useDefault={false} />
                        </Col>
                    </Row>
                </div>
            </WeaNewScroll>
        )
    }
}